<template>
  <div class="yzbb">
    <el-tree
      :expand-on-click-node="false"
      :default-expand-all="true"
      :highlight-current="true"
      :data="project_tree_data"
      :render-content="Content_fun"
      :props="defaultProps"
      @node-click="node_click"
    ></el-tree>
  </div>
</template>

<script>
import { getProjectTree } from '../../api/tunnel_manage/index'
export default {
  props: {
    type: null,
    // 树节点单击 交给父节点定义
    node_click: {
      type: Function,
      default: () => {},
    },
    // 点击函数
    clickfun: {
      type: Function,
      default: () => {},
    },
    // 部位的点击按钮属性
    clickData: {
      default: {
        icon: '',
        txt: '',
        type: '',
      },
    },
    // 修改点事件
    setPoint: {
      type: Function,
      default: () => {},
    },
    // 删除点事件
    delPoint: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      // 树数据
      project_tree_data: [],
      defaultProps: {
        children: 'children',
      },
    }
  },
  methods: {
    // 获取树数据
    async get_project_tree() {
      if (!(this.$store.state.projectInfo instanceof Object)) return
      let res = await getProjectTree({ projectId: this.$store.state.projectInfo.id, type: this.type ? this.type : null })
      if (res.result == 0) {
        // this.project_tree_data = res.resultContent.positionList
        let projectInfo = this.$store.state.projectInfo
        this.project_tree_data = [{ children: res.resultContent.positionList, name: projectInfo.name, id: projectInfo.id }]
      }
    },
    // 树节点渲染
    Content_fun(h, { node, data, store }) {
      if (data.id == this.$store.state.projectInfo.id) {
        return (
          <div class="w100 flex_sb" style="padding-right:20px">
            <span class="tree_children_name"> {data.name}</span>
            <span class="tree_children_describe"> 项目根节点</span>
          </div>
        )
      }
      if (this.clickData) {
        if (data.x != null) {
          return (
            <div class="w100 flex_sb" title="点位数据" style="padding-right:20px">
              <span class="tree_children_name"> {data.name}</span>
              <span class="tree_children_describe">
                <el-link
                  title="修改点"
                  on-click={e => {
                    // 冒泡
                    e.stopPropagation()
                    this.setPoint_(data, node)
                  }}
                  type="primary"
                >
                  <i class="el-icon-setting"></i>
                </el-link>
                &nbsp;
                <el-link
                  title="删除点"
                  on-click={e => {
                    // 冒泡
                    e.stopPropagation()
                    this.delPoint_(data, node)
                  }}
                  type="danger"
                >
                  <i class="el-icon-delete"></i>
                </el-link>
                &nbsp; 点
              </span>
            </div>
          )
        } else {
          return (
            <div class="w100 flex_sb" style="padding-right:20px">
              <span class="tree_children_name">{data.name}</span>
              <span class="tree_children_describe">
                <el-link
                  title={this.clickData.title}
                  on-click={e => {
                    // 冒泡
                    e.stopPropagation()
                    this.clickfun(data, node)
                  }}
                  type={this.clickData.type}
                >
                  <i class={this.clickData.icon}></i>
                  {this.clickData.txt}
                </el-link>
                &nbsp;部位
              </span>
            </div>
          )
        }
      }
      if (!this.clickData) {
        return (
          <div class="w100 flex_sb" style="padding-right:20px">
            <span> {data.name}</span>
          </div>
        )
      }
    },
    // 修改点
    setPoint_(data, node) {
      // console.log('修改点')
      this.setPoint(data, node)
    },
    // 删除点
    delPoint_(data, node) {
      // console.log('删除点')
      this.delPoint(data, node)
    },
  },
  mounted() {
    this.$ebs.$on('selectProject_change', this.get_project_tree)
    this.get_project_tree()
  },
  destroyed() {
    this.$ebs.$off('selectProject_change')
  },
}
</script>


<style lang="scss" scoped>
.yzbb {
  user-select: none;
}
</style> 
<style >
.tree_children_name {
  width: 80px;
  text-overflow: ellipsis;
  overflow-x: hidden;
  white-space: nowrap;
}
.tree_children_describe {
  font-size: 10px;
  font-weight: 700;
}
</style>